<template>
  <div class="tag_container">
    <!-- 中间导航 -->
    <div class="middle-net">
      <el-radio-group
        class="addlist"
        v-model="tabPosition"
        :class="item.id == tabPosition ? 'add_color' : ''"
        v-for="(item, index) in items"
        :key="index"
      >
        <el-radio-button class="addbutton" :label="item.id">{{
          item.name
        }}</el-radio-button>
        <!-- <el-radio-button class="addbutton" label="right"
          >招标采购</el-radio-button
        >
        <el-radio-button class="addbutton" label="bottom"
          >工程项目</el-radio-button
        >
        <el-radio-button class="addbutton" label="left"
          >机械设备</el-radio-button
        >
        <el-radio-button class="addbutton" label="4">装饰建材</el-radio-button>
        <el-radio-button class="addbutton" label="1">配送运输</el-radio-button>
        <el-radio-button class="addbutton" label="2">施工队伍</el-radio-button>
        <el-radio-button class="addbutton" label="3">综合服务</el-radio-button> -->
      </el-radio-group>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    //slick: Slick
    //VDistpicker
  },
  data() {
    return {
      tabPosition: 0,
      items: [
        { id: 1, name: "首页" },
        { id: 2, name: "招标采购" },
        { id: 3, name: "工程项目" },
        { id: 4, name: "机械设备" },
        { id: 5, name: "装饰建材" },
        { id: 6, name: "配送运输" },
        { id: 7, name: "施工队伍" },
        { id: 8, name: "综合服务" }
      ]
    };
  },
  created() {
    //获取工程分类
    this.Postcatgory();
  },
  methods: {
    //获取工程分类
    Postcatgory() {
      let _this = this;
      _this.$axios.post(_this.$basis + "/catgory").then(res => {
        let data = res.data.data;
        let resdata = res.data;
        this.items = [];
        var a;
        switch (resdata.code) {
          case 0:
            for (let i in data) {
              a = {};
              a.id = data[i]["id"];
              a.name = data[i]["catgory_name"];
              _this.items[i] = a;
            }
            _this.items.unshift({
              id: 0,
              name: "首页"
            });
            break;
          case 1:
            console.log(resdata.msg);
            break;
        }
      });
    }
  }
};
</script>
<style lang="scss">
@import "../../assets/css/theme";
.tag_container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
  min-width: 1200px;
  height: 44px;
  padding: 5px 18.15% 20px 18.15%;
  background: #e4575b;
  .middle-net {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-width: 850px;
    height: 44px;
    line-height: 44px;
    background: #e4575b;
    font-size: 18px;
    .addlist {
      font-size: 18px;
      background: #e4575b;
      text-align: center;

      .addbutton {
        cursor: pointer;
        width: 100px;
        border: none;
        color: #ffffff;
        background: #e4575b;
        .el-radio-button__inner {
          border: none;
          font-size: 18px;
          color: #ffffff;
          background: #e4575b;
          border-color: #e4575b;
        }
      }
    }
    .addlist:hover {
      font-size: 18px;
      background: #ee181e;
      .addbutton {
        cursor: pointer;
        width: 100px;
        border: none;
        background: #ee181e;
        .el-radio-button__inner {
          border: none;
          font-size: 18px;
          background: #ee181e;
          background: #ee181e;
        }
      }
    }
    .add_color {
      background: #ee181e;
      .addbutton {
        cursor: pointer;
        width: 100px;
        border: none;
        background: #ee181e;
        .el-radio-button__inner {
          border: none;
          font-size: 18px;
          background: #ee181e;
          background: #ee181e;
        }
      }
    }
  }
}
</style>
